<html>
<head>
	<meta charset="UTF-8">
	<link href="./static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="./static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
	<link href="./static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
	<script src="./static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="./gethost.js" type="text/javascript"></script>
</head>

<body>
<div class="content">
	<h3 class="form-title">商品列表</h3>
	<div class="table-responsive">
		<table class="table">
			<thead>
			<tr>
				<th>商品名</th>
				<th>商品图片</th>
				<th>商品描述</th>
				<th>商品价格</th>
				<th>商品库存</th>
				<th>商品销量</th>
			</tr>
			</thead>
			<tbody id="container">
			</tbody>
		</table>
	</div>
</div>

</body>

<script>
	// 定义全局商品数组信息
	var g_itemList = [];

	jQuery(document).ready(function () {
		$.ajax({
			type:"GET",
			url:"http://"+g_host+"/item/list",
			xhrFields: {withCredentials: true},
			success:function (data) {
				if (data.status == "success") {
					// alert("获取商品信息成功");
					g_itemList = data.data;
					reloadDom();
				}else {
					alert("获取商品信息失败，原因："+data.data.errMsg);
				}
			},
			error:function (data) {
				alert("获取商品信息失败，原因："+data.responseText);
			}
		})
	})

	function reloadDom() {
		for (var i = 0; i < g_itemList.length; i ++){
			var itemVO = g_itemList[i];
			console.log(itemVO.title)
			var dom = "<tr data-id='"+ itemVO.id +"' id='itemDetail"+ itemVO.id +"'><td>"+ itemVO.title +"</td><td><img style='width: 100px;height: auto' src='"+ itemVO.imgUrl +"'></td><td>"+ itemVO.description +"</td><td>"+ itemVO.price +"</td><td>"+ itemVO.stock +"</td><td>"+ itemVO.sales +"</td></tr>";
			$("#container").append($(dom));

			$("#itemDetail"+itemVO.id).on("click",function (e) {
				window.location.href="getitem.html?id="+$(this).data("id");
			})
		}
	}
</script>
</html>